import useDeviceHook from '@/hooks/device'
import useLoading from '@/hooks/loading'
import {ratio2color} from '@/libs/text2Color'
import {str2num} from '@/libs/toolkit'
import {CCard} from '../card'
import {DeviceStatusOfStatus, ParamIcon, ParamOfStatus} from '../image'
import RollerDigital from '../rollerDigital'
import {CnBoldP, CnBoldSpan, CnMediumSpan} from '../text'
import WaterTarget from '../waterTarget'

const LiveDataCard = defineComponent({
  props: {
    devId: Number
  },
  emits: {
    bigScreenShow: (): boolean => true
  },
  setup(props, {emit}) {
    const {updateLiveData} = useDeviceHook()
    const {loading, startLoading, closeLoading} = useLoading()
    const state = reactive<{
      dataSource: LiveData.DevLiveData | undefined
    }>({
      dataSource: undefined
    })

    onMounted(() => {
      if (!props.devId) return
      startLoading()
      updateLiveData({
        devId: props.devId,
        success(data) {
          state.dataSource = data
          closeLoading()
        }
      })
    })

    return () => (
      <CCard
        class='min-h-60 col-span-1 rounded-4 bg-white overflow-hidden flex flex-col px-0 '
        title={'数据展示-设备卡片-' + state.dataSource?.devName || ''}
        vein={true}
        v-slots={{
          title: () => (
            <div class='w-full flex justify-between items-center px-20'>
              <CnBoldSpan>{state.dataSource?.devName || ''}</CnBoldSpan>
              <div class='flex items-center '>
                <DeviceStatusOfStatus status={state.dataSource?.devStatusCode}>
                  <CnBoldSpan class='text-16'></CnBoldSpan>
                </DeviceStatusOfStatus>
                <a-button
                  primary
                  size='small'
                  class='border-primary text-primary ml-12'
                  onClick={() => {
                    emit('bigScreenShow')
                  }}
                >
                  大屏展示
                </a-button>
              </div>
            </div>
          )
        }}
        loading={loading.value}
      >
        <div class='px-16'>
          {/* 水质分析 */}

          {state.dataSource ? (
            <div class='w-full min-h-64 flex items-center mt-16'>
              <WaterTarget
                id={'deviceTarget' + (state.dataSource.devId || Math.random())}
                radius={20}
                range={((state.dataSource.nowStandRatio || 0) / 100) * 360}
                borderColor={ratio2color(state.dataSource.nowStandRatio || 0)}
                showDashed={false}
                borderWidth={2}
              >
                <RollerDigital
                  class='text-15'
                  style={{
                    color: ratio2color(state.dataSource.nowStandRatio || 0)
                  }}
                  endVal={state.dataSource.nowStandRatio}
                  bold={false}
                ></RollerDigital>
              </WaterTarget>
              <div class='flex-1 ml-24 overflow-x-hidden flex flex-col'>
                <CnBoldP>{state.dataSource.checkResult || '无参数状态'}</CnBoldP>
                <div class='mt-8 flex flex-wrap gap-x-16 gap-y-8'>
                  {state.dataSource.paramList.map((param, idx) => (
                    <ParamOfStatus
                      class='text-left flex justify-center'
                      status={param.paramStatusCode}
                    >
                      {param.paramName}
                    </ParamOfStatus>
                  ))}
                </div>
              </div>
            </div>
          ) : null}

          {state.dataSource && state.dataSource.paramList && state.dataSource.paramList.length ? (
            <div class='w-full grid grid-cols-2 gap-x-10 gap-y-10 mt-18'>
              {state.dataSource.paramList.map(param => {
                const paramValue = str2num(param.paramValue || '')
                return (
                  <div class='w-full h-90 p-10'>
                    <div class='flex items-center gap-x-6'>
                      {param.paramName ? <ParamIcon imgName={param.paramName}></ParamIcon> : null}
                      <CnMediumSpan class='mr-4'>{param.paramName}</CnMediumSpan>
                      <CnMediumSpan class='mr-10 text-5xText text-12'>
                        {param.checkTime}
                      </CnMediumSpan>
                      {param.paramStatusCode ? (
                        <ParamOfStatus
                          showStatusText={false}
                          status={param.paramStatusCode}
                        ></ParamOfStatus>
                      ) : null}
                    </div>
                    <div class='pl-6'>
                      <RollerDigital
                        class='text-30 text-text'
                        endVal={paramValue}
                        bold={true}
                        decimals={2}
                      ></RollerDigital>
                    </div>
                  </div>
                )
              })}
            </div>
          ) : null}
        </div>
      </CCard>
    )
  }
})

export default LiveDataCard
